<template>
  <div class="add-form">
    <!-- 新增弹层 -->
    <el-dialog :visible.sync="dialogVisiable" v-if="dialogVisiable" title="编辑用户">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        style="width: 80%; margin-left:6%"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="ruleForm.shortName"></el-input>
          <el-checkbox v-model="ruleForm.isFamous">是否名企</el-checkbox>
        </el-form-item>

        <el-form-item label="所属公司" prop="company">
          <el-input v-model="ruleForm.company"></el-input>
          <div>https://www.tianyancha.com （在此可查询所属公司全称及简称）</div>
        </el-form-item>

        <el-form-item label="城市" prop="province">
          <el-select
            v-model="ruleForm.province"
            @change="getCityList"
            placeholder="请选择"
            clearable
            style="width: 120px;"
          >
            <el-option
              style="width: 120px;"
              v-for="(province,index) in provinceList"
              :key="index"
              :label="province"
              :value="province"
            ></el-option>
          </el-select>

          <el-select v-model="ruleForm.city" placeholder="请选择" clearable style="width: 120px;">
            <el-option
              style="width: 120px;"
              v-for="(city,index) in cityList"
              :key="index"
              :label="city"
              :value="city"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="ruleForm.tags"></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button @click="dialogVisiable = false">取 消</el-button>
        <el-button type="primary" @click="updateCompany">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { provinces, citys } from '../../api/hmmm/citys.js'
import { update } from '../../api/hmmm/companys'
export default {
  name: 'CompanysAdd',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    companyDetail: {
      type: Object,
      required: true
    }
  },
  computed: {
    dialogVisiable: {
      get () {
        return this.visible
      },
      set (val) {
        // console.log(val)
        this.$emit('update:visible', val)
      }
    }
  },
  data () {
    return {
      provinceList: [],//城市列表
      cityList: [],//每个城市所关联的区域列表
      ruleForm: {},
      rules: {
        shortName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        company: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
        province: [{ required: true, message: '请输入城市', trigger: 'change' }],
        tags: [{ required: true, message: '请输入企业方向', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }
    };
  },
  created () {
    this.getprovinceList()
    this.ruleForm = this.companyDetail
    this.ruleForm.isFamous = this.ruleForm.isFamous === 1 ? true : false
  },
  methods: {
    // 获取搜索栏中的城市列表
    getprovinceList () {
      this.provinceList = provinces()
      this.cityList = citys(this.companyDetail.province)
    },
    //获取城市所关联的区域列表
    getCityList () {
      this.cityList = citys(this.ruleForm.province)
      this.ruleForm.city = this.cityList[0]
    },
    //修改数据
    updateCompany () {
      // 在表单提交之前会进行表单的预校验
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          try {
            console.log(this.ruleForm);
            await update(this.ruleForm)
            this.$message.success('修改成功')
            this.$emit('getEvent');
            this.dialogVisiable = false
          } catch (error) {
            console.log(error);
            this.$message.error('操作失败!')
          }
        }
      })
    },

  }
}

</script>

<style lang="scss" scoped>
</style>
